    <!-- 术语导入 -->
<template>
  <div class="term_import_wrapper">
    <div class="title">术语导入</div>
    <div class="radioitem">
      <label>是否导入</label>
      <ul class="radio">
        <li @click="selectTerm(true)" :class="{selected:isTerm}">导入</li>
        <li @click="selectTerm(false)" :class="{selected:!isTerm }">不导入</li>
      </ul>
    </div>
    <div class="radioitem" v-if="isTerm">
      <label>术语导入</label>
      <ul class="radio">
        <li @click="selectImpType(1)" :class="{'selected':termRid}">云盘导入</li>
      </ul>
    </div>
    <div class="tb-lt" v-show="isTerm && termRid !=''">
      <div class="btn-lf" style="display:none">
        <a @click=" deleteMyrid()">全部删除</a>
      </div>
      <dl class="file">
        <dt>
          <ul>
            <li>文件名称</li>
            <li>操作</li>
          </ul>
        </dt>
        <dd>
          <ul>
            <li>{{selectTermName}}</li>
            <li>
              <a @click=" deleteMyrid(1)">删除</a>
            </li>
          </ul>
        </dd>
      </dl>
    </div>
    <!-- 导入数据选择弹框 -->
    <div class="pop" v-show="importBox">
      <div class="layer"></div>
      <div class="show_pop bdradius">
        <div class="poptitle">
          <i @click="cancel"></i>
          <span class="fs14_bold">云盘导入</span>
        </div>
        <div class="myloc">
          <a @click="locBakTree()">根目录&gt;</a>
          <a v-for="(item,index) in selectTree" class="ainimate" @click="locBakTree(index+1,item.rid,item.name)" :key="item+item.rid">{{item.name}}&gt;</a>
        </div>
        <div class="tree">
          <ul>
            <li v-for="item in fileList" :class="{'current':selectFileRid==item.rid}" :key="item+item.rid">
              <i v-show="item.type!='file'" @click="changefile(item.rid,item.name,item.type)"></i>
              <div class="father" @click="openTree(item.rid,item.name)">
                <em style="display:none"></em>
                {{item.name}}
              </div>
            </li>
          </ul>
        </div>
        <div class="btngroup">
          <a class="yes" @click="saveTree">确定</a>
          <a class="last" @click="cancel">取消</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TermImport',
  props: {
    comInfo: {
      type: Object,
      default: () => ({})
    },
    batchEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 术语导入
      importBox: false,
      selectTree: [],
      fileList: [],
      importStatus: true, //是否允许继续打开目录
      isTerm: false,// 是否开启 导入术语
      selectingTerm: false,// 是否 正在 选择话术
      selectTermName: '',// 选中的话术名
      termRid: '',// 话术文件id
      selectFileRid: "",
      selectFileName: "",
    }
  },
  created() {

  },
  mounted() {

  },
  watch: {
    comInfo: {
      handler(val) {
        if (!val) return;
        let data = this.$data
        Object.keys(data).forEach(key => {
          if (val.hasOwnProperty(key)) {
            this[key] = val[key]
          }
        })
      },
      immediate: true
    }
  },
  methods: {
    // 数据导入 信息删除
    deleteMyrid: function (type) {
      if(this.batchEdit) return;
      if (type == 0) {
        this.myrid = "";
      } else {
        this.termRid = "";
      }
    },
    // 点击导入云盘数据 根目录选项
    locBakTree: function (index, rid) {
      if (index == "" || index == undefined || index == null) {
        this.selectTree = [];
        this.myrid = "";
        this.selectFileRid = "";
        this.getFileTree("", "css");
      } else {
        this.selectTree.splice(index, this.selectTree.length);
        this.myrid = rid;
        this.getFileTree(rid, "css");
      }
    },
    // 打开云盘
    openTree: function (rid, name) {
      this.getFileTree(rid, "css", name);
    },
    changefile: function (rid, name, type) {
      if (type != "file") {
        this.selectFileRid = rid;
        if (this.selectingTerm) {
          this.selectTermName = name;
        } else {
          this.selectFileName = name;
        }
      } else {
        //音频文件不可选，只能选文件夹
      }
    },
    // 云盘数据请求方法
    async getFileTree(path, type, name) {
      var self = this;
      let params = {
        type,
        fileType: 0
      };
      if (path == "") {
        params.path = "";
        // proxyurl = "/v1/be/common/files?path= ;
      } else {
        params.path = { rid: path };
        // '/v1/be/common/files?path={"rid":"' + path + '"}'
      }
      if (this.importStatus) {
        this.importStatus = false;
        await this.ass_api.getCloudInfo(params).then(data => {
          if (!data) return;
          self.importStatus = true;
          if (data.length > 0) {
            self.fileList = data;
            if (name != "" && name != null && name != undefined) {
              var newdata = new Object();
              newdata.rid = path;
              newdata.name = name;
              self.selectTree.push(newdata);
              self.myrid = "";
            }
          } else {
            self.ui.fade("当前目录没有可打开的文件");
          }
        });
      }
    },
    selectTerm(type){
      if(this.batchEdit) return;
      this.isTerm = type
    },
    // 云盘数据选择确定保存
    saveTree: function () {
      if (this.selectFileRid != "") {
        // this.myrid = this.selectFileRid;
        if (this.selectingTerm) {
          this.termRid = this.selectFileRid;
        } else {
          this.myrid = this.selectFileRid;
        }
        this.importBox = false;
        this.selectTree = [];
        this.selectFileRid = "";
      } else {
        console.log("没选择云盘");
      }
    },
    // 打开云盘选择列表
    selectImpType: function (n) {
      if(this.batchEdit) return;
      if (n == 1) {
        this.selectingTerm = true;
      } else {
        this.selectingTerm = false;
      }
      this.importType = 0;
      if (n == 0 || n == 1) {
        this.importBox = true;
        this.getFileTree("", "css");
      } else {
        this.importBox = false;
      }
    },
    cancel: function () {
      this.importBox = false;
    },
    validate() {
      if (this.isTerm && !this.termRid) {
        this.ui.fade("请导入术语库！");
        return false;
      }
      return true;
    },
    // 外部获取当前组件的值 
    getComponentVal() {
      return {
        type: 'base',
        value: {
          isTerm: this.isTerm,// 是否开启 导入术语
          selectTermName: this.selectTermName,// 选中的话术名
          termRid: this.termRid,// 话术文件id
          // selectFileRid: this.selectFileRid,
          // selectFileName: this.selectFileName,
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
.term_import_wrapper {
  .title {
    color: #5e6a68;
    font-size: 16px;
    font-weight: 700;
    line-height: 48px;
    display: block;
    position: relative;
    padding-left: 14px;
    margin-top: 10px;
    &::before {
      position: absolute;
      left: 0;
      top: 17px;
      width: 4px;
      height: 15px;
      display: block;
      background: #07d569;
      content: "";
    }
    p {
      padding: 5px 23px;
      display: inline;
      font-size: 12px;
      font-weight: normal;
      color: #e07900;
    }
  }
  .radioitem {
    height: 34px;
    line-height: 14px;
    margin: 15px 0 15px 0;
    .radio {
      height: 14px;
      line-height: 14px;
      float: left;
      margin-top: 10px;
      width: auto;
      margin-left: 0;
      li {
        margin-right: 40px;
        font-size: 14px;
        color: #333;
        cursor: pointer;
        padding-left: 22px;
        display: inline-block;
        background: url("~@/assets/images/common/radio.png") no-repeat -119px 0;
        float: left;
        width: auto;
      }
      li.selected {
        background-position: 0 0;
      }
      li.selected[type="cursor"] {
        cursor: default;
      }
    }
    label {
      width: 100px;
      padding-right: 10px;
      text-align: right;
      float: left;
      line-height: 34px;
      color: #666;
    }
  }
  .tb-lt {
    margin-left: 95px;
    .btn-lf {
      margin: 10px 0 15px 0;
    }
    .btn-lf a {
      height: 35px;
      line-height: 35px;
      display: inline-block;
      padding: 0 20px;
      background: #fcad1d;
      color: #fff;
    }
    .btn-lf a:hover {
      background: #e07900;
    }
    .file {
      border: 1px dashed #eee;
      border-left: 0;
      border-right: 0;
    }
    .file dt {
      height: 45px;
      line-height: 45px;
      background: #fafafa;
      color: #969696;
      border-bottom: 1px dashed #eee;
    }
    .file dd {
      height: 50px;
      line-height: 50px;
    }
    .file dd {
      border-bottom: 1px dashed #eee;
    }
    .file ul li:nth-child(1) {
      width: 190px;
      float: left;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .file ul li:nth-child(2) {
      text-align: center;
      padding-right: 20px;
      width: 150px;
      float: right;
    }
    .file ul li:nth-child(2) a {
      color: #333;
      border: 1px solid #ececec;
      border-radius: 2px;
      height: 30px;
      line-height: 30px;
      cursor: pointer;
      display: inline-block;
      padding: 0 10px;
      border-radius: 2px;
    }
    .file ul li:nth-child(2) a:hover {
      background: #f9f9f9;
    }
    .file ul li:nth-child(2) a[type="cursor"] {
      cursor: default;
    }
    .file ul li:nth-child(2) a[type="cursor"]:hover {
      background: #fff;
    }
  }
  .pop {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 998;
    .btngroup {
      padding-top: 10px;
      padding-bottom: 20px;
    }
    .layer {
      background: rgba(0, 0, 0, 0.3);
      width: 100%;
      height: 100%;
    }
    .show_pop {
      width: 405px;
      text-align: left;
      display: block;
      position: fixed;
      left: 50%;
      margin-left: -202px;
      top: 50%;
      margin-top: -119px;
      background: #fff;
      overflow: hidden;
      margin-top: -217px;
      .poptitle {
        line-height: 40px;
        height: 40px;
        border-bottom: 1px solid #e5e5e5;
        background: #f5f5f5;
      }
      .poptitle i {
        float: right;
        width: 12px;
        height: 12px;
        display: block;
        background: url("~@/assets/images/common/close.png") no-repeat 0 0;
        margin-top: 14px;
        margin-right: 20px;
        cursor: pointer;
      }
      .poptitle span {
        padding-left: 20px;
      }
      .popdis {
        text-align: center;
        line-height: 30px;
        padding: 24px 0;
      }
    }
    .myloc {
      height: 40px;
      padding: 0 30px;
      line-height: 40px;
      font-size: 14px;
      padding-right: 5px;
      a {
        color: #c6c6c6;
      }
      a.ainimate {
        color: #14cb6b;
      }
    }
  }
  .tree {
    padding: 0 30px 30px 30px;
    height: 336px;
    overflow-y: auto;
    ul {
      border-bottom: 1px solid #ececec;
    }
    ul li {
      border: 1px solid #ececec;
      border-bottom: 0;
      line-height: 40px;
      cursor: pointer;
      position: relative;
      padding-right: 44px;
    }
    ul li .father {
      position: relative;
      margin-left: 44px;
    }
    ul li .father em {
      position: absolute;
      right: 20px;
      top: 15px;
      display: none;
      width: 12px;
      height: 12px;
      background: url("~@/assets/images/common/manage/open.png") no-repeat 0 0;
    }
    ul li i {
      position: absolute;
      left: 15px;
      top: 15px;
      display: block;
      width: 12px;
      height: 12px;
      background: url("~@/assets/images/common/checkbox.png") no-repeat 0 0;
    }
    ul li.current i {
      background-position: 0 -12px;
    }
    ul li.current {
      background: #e0ffed;
    }
    ul li ul {
      border-bottom: 0;
    }
    ul li ul li {
      border-left: 0;
      border-right: 0;
      font-size: 12px;
      line-height: 34px;
    }
    ul li ul li .father {
      padding-left: 66px;
    }
  }
}
</style>
